define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echarts-theme', 'template'], function ($, undefined, Backend, Datatable, Table, Echarts, undefined, Template) {

    var Controller = {
        index: function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart = Echarts.init(document.getElementById('echart'), 'walden');

            // 指定图表的配置项和数据
            var option = {
					title: {
						text: "在线统计图表",
						x: "5%",
						top:'0%',

						textStyle: {
							color: '#446699',
							fontSize: '14'
						}
					},
					tooltip: {
						"trigger": "axis",
						"axisPointer": {
							"type": "shadow",
							textStyle: {
								color: "#fff"
							}

						},
					},
					toolbox: {
						feature: {
							mark : {show: true},  
							dataView : {show: false, readOnly: false},  
							magicType : {show: true, type: ['line', 'bar']},  
							restore : {show: true},  
							saveAsImage: {show: true}
							}
					},
					grid: {
						"borderWidth": 0,
						"top": '20%',
						"bottom": '20%',
						"left":'5%',
						"right":'3%',
						textStyle: {
							color: "#fff"
						}
					},
					legend: {
						x: '30%',
						top: '85%',
						textStyle: {
							color: '#90979c',
						},
						"data": ['在线用户数量']
					},					
					calculable: true,
					xAxis: [{
						"type": "category",
						"axisLine": {
							lineStyle: {
								color: '#90979c'
							}
						},
						"splitLine": {
							"show": false
						},
						"axisTick": {
							"show": false
						},
						"splitArea": {
							"show": false
						},
						"axisLabel": {
							"interval": 0,
						},
						"data": Orderdata.column,
					}],					
					yAxis: [{
						"type": "value",
						"splitLine": {
							"show": false
						},
						"axisLine": {
							lineStyle: {
								color: '#90979c'
							}
						},
						"axisTick": {
							"show": false
						},
						"axisLabel": {
							"interval": 0,

						},
						"splitArea": {
							"show": false
						},

					}],					
					series: [{
						"name": "用户数量",
						"type": "bar",
						"itemStyle": {
							"normal": {
								"color": "#45CBDC",
								"barBorderRadius": 0,
								"label": {
									"show": true,
									"position": "top",
									formatter: function(p) {
										return p.value > 0 ? (p.value) : '';
									}
								}
							}
						},
						"data": Orderdata.tnum
					},
				]					
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            $(window).resize(function () {
                myChart.resize();
            });

            
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'datacenter/onlineinfo/lists',
                    table: 'v_onlineinfo',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'createtime',
                sortName: 'createtime',
                search: false,
                commonSearch: false, //是否启用通用搜索
                pageSize: 10,
                columns: [
                    [
                        {field: 'createtime', title: __('时间'), formatter: Table.api.formatter.datedays, operate: 'BETWEEN', type: 'datetime', addclass: 'datetimepicker', data: 'data-date-format="YYYY-MM-DD"', style: 'min-width:90px;'},
                        {field: 'cnum', title: __('总用户'), operate: false},
                        {field: 'hnum', title: __('最高人数'), operate: false},
                        {field: 'anum', title: __('平均人数'), operate: false},
                        {field: 'operate', title: __('详情'), table: table, events: Table.api.events.operate,
                            buttons: [
                                {name: 'detail', text: '查看24小时详情', classname: 'btn btn-xs btn-info btn-addtabs', url: 'datacenter/onlineinfot/index'}
                            ],
                            formatter: Table.api.formatter.operate
                        },
                    ]
                ],
                
            });
            
            //指定搜索条件
            function sousuo_time(){
                var startime = $("#startime").val();  
                var endtime = $("#endtime").val();  
                var a = startime+','+endtime;
                var options = table.bootstrapTable('getOptions');
                options.pageNumber = 1;
                options.queryParams = function (params) {
                    return {
                        search: params.search,
                        sort: params.sort,
                        order: params.order,
                        filter: JSON.stringify({createtime: a}),
                        op: JSON.stringify({createtime: 'RANGE'}),
                        offset: params.offset,
                        limit: params.limit,
                    };
                };
                table.bootstrapTable('refresh', {});
            }

            //搜索时间控件
            require(['bootstrap-datetimepicker'], function () {
                $('#startime').parent().css('position', 'relative');
                $('#startime').datetimepicker({
                    format: 'YYYY-MM-DD',
                    icons: {
                        time: 'fa fa-clock-o',
                        date: 'fa fa-calendar',
                        up: 'fa fa-chevron-up',
                        down: 'fa fa-chevron-down',
                        previous: 'fa fa-chevron-left',
                        next: 'fa fa-chevron-right',
                        today: 'fa fa-history',
                        clear: 'fa fa-trash',
                        close: 'fa fa-remove'
                    },
                    showTodayButton: true,
                    showClose: true
                });
                $('#endtime').parent().css('position', 'relative');
                $('#endtime').datetimepicker({
                    format: 'YYYY-MM-DD',
                    icons: {
                        time: 'fa fa-clock-o',
                        date: 'fa fa-calendar',
                        up: 'fa fa-chevron-up',
                        down: 'fa fa-chevron-down',
                        previous: 'fa fa-chevron-left',
                        next: 'fa fa-chevron-right',
                        today: 'fa fa-history',
                        clear: 'fa fa-trash',
                        close: 'fa fa-remove'
                    },
                    showTodayButton: true,
                    showClose: true
                });
            });
            
            //载入页面时，按指定搜索条件搜索一次
            $(document).ready(function(){
            	sousuo_time();
            });
//            
//            //点击包含.btn-ajax的元素时发送Ajax请求
//            $(document).on('click', '.btn-status', function (e) {
//            	sousuo_time();
//            });
            
            // 为表格绑定事件
            Table.api.bindevent(table);
            
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    
    };

    return Controller;
});